<template>
  <div class="page_box1">
    <el-button @click="test01">promise 异步非阻塞队列</el-button>
    <el-button @click="test02">promise 异步阻塞队列</el-button>
  </div>
</template>

<script>
import { TaskQueue } from "@/utils/Queue/TaskQueue";
import { TaskQueueBlocking } from "@/utils/Queue/TaskQueueBlocking";
export default {
  data() {
    return {};
  },
  methods: {
    //  -----    以下为测试
    func(time, resulet = true) {
      return new Promise((resolve, reject) => {
        console.log(`time:${time} 执行了`);
        if (resulet) {
          setTimeout(() => {
            console.log(`time:${time} 执行成功`);
            resolve(`time:${time} 执行成功`);
          }, time * 1000);
        } else {
          console.log(`time:${time} 执行失败`);
          reject(`time error:${time} 执行失败`);
        }
      });
    },

    // 不阻塞 示例
    test01() {
      const taskQueue = new TaskQueue();
      taskQueue.addTask(() => this.func(4));
      taskQueue.addTask(() => this.func(3));
      taskQueue.addTask(() => this.func(2, false));
      taskQueue.addTask(() => this.func(5));
      taskQueue
        .run()
        .then((res) => {
          console.log("异步成功的函数", res);
          console.log("异步失败的函数", taskQueue.showErrorTask());
        })
        .catch((error) => {
          console.log("异步执行失败", error);
        });
    },

    // 阻塞 示例
    test02() {
      const taskQueue = new TaskQueueBlocking();
      taskQueue.addTask(() => this.func(4));
      taskQueue.addTask(() => this.func(3));
      taskQueue.addTask(() => this.func(2, false));
      taskQueue.addTask(() => this.func(5));
      taskQueue
        .run()
        .then((res) => {
          console.log("异步成功的函数", res);
        })
        .catch((error) => {
          console.log("异步执行失败", error);
        });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.page_box1 {
  width: 100%;
  height: 500px;
  display: block;
}
</style>
